<template>
  <component
    v-show="currentVisible"
    :show="currentVisible"
    :name="name"
    :prop="prop"
    :layer="layer"
    :sources="sources"
    :map="map"
    :activeLayerList="activeLayerList"
    :is="currentComponent"
    v-on="$listeners">
  </component>
</template>

<script type="text/ecmascript-6">
  import components from './index.js'
  import _ from 'lodash'
  import common from '../common.js'

  export default {
    components,
    props: {
      prop: {},
      layer: {},
      name: {},
      map: {},
      options: {},
      sources: {},
      zoom: {},
      category: {},
      activeLayerList: {}
    },
    computed: {
      currentMarker() {
        return this.layer.marker || {}
      },
      currentVisible() {
        return this.currentShow && this.currentCategory
      },
      currentCategory() {
        let category = this.currentMarker.category
        if (!category) return true
        if (typeof category === 'string') {
          category = _.get(this.prop, category)
          return this.category.indexOf(category) > -1
        } else if (typeof category === 'function') {
          return category.call(this, this.prop, this.category)
        } else {
          return true
        }
      },
      currentShow() {
        let zoom = this.currentMarker.zoom
        if (!zoom) return true
        if (typeof zoom === 'function') {
          zoom = zoom.call(this, this.prop)
        } else if (typeof zoom === 'string') {
          zoom = _.get(this.prop, zoom)
        }
        let [start, end] = zoom
        return this.zoom >= Number(start) && this.zoom <= Number(end)
      },
      currentComponent() {
        return common.case(this.currentMarker.layout)
          .string(val => `mx-marker-${val}`)
          .object(val => val)
          .function(val => val.call(this, this.prop))
          .default('mx-marker-simple')
      }
    }
  }
</script>

<style scoped>
</style>
